<template>
<div class="form-container">
  <div class="form" :model="sendForm">
      <span class="heading">Get in touch</span>
      <input v-model="sendForm.username" placeholder="Name" type="text" class="input" required>
      <input v-model="sendForm.email" placeholder="Email" id="mail" type="email" class="input" required>
      <textarea v-model="sendForm.message" placeholder="Say Hello" rows="10" cols="30" id="message" name="message" class="textarea input"></textarea>
      <div class="button-container">
      <div class="send-button" @click="SendMessage">Send</div>
      <div class="reset-button-container">
          <div id="reset-btn" class="reset-button" @click="ClearInputData">Reset</div>
      </div>
    </div>
  </div>
</div>

</template>


<script lang="ts">
import { gsap } from 'gsap'
import {ContactEmail} from '@/utils/api'

export default defineComponent({
  async setup() {

    const data = reactive({
      sendForm: {
        username: '',
        email: '',
        message: ''
      },

    })

    // 验证
    const pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
    const SendMessage = async() => {
      if(data.sendForm.username && data.sendForm.email && data.sendForm.message){
        if(pattern.test(data.sendForm.email)){
            await ContactEmail({
              'username': data.sendForm.username,
              'email': data.sendForm.email,
              'message': data.sendForm.message
            }).then(res => {
              ElMessage({
                message: res.value.message,
                type: 'success',
                duration: 1000,
                center: true,
              })
            })
        }
        else {
          ElMessage({
            message: 'Email format error!',
            type: 'error',
            duration: 1000,
            center: true,
          })
        }
      }
      else{
        ElMessage({
          message: 'Please fill in the form',
          type: 'error',
          duration: 1000,
          center: true,
        })
      }
    }


    const ClearInputData = async () => {
      document.querySelectorAll('.input').forEach(
        (input) => {          
          input.value = ''
        }
      )
    }

    

    return{
      ...toRefs(data),
      SendMessage,
      ClearInputData,

    }
  }

})

</script>


<style scoped>


.form-container {
  max-width: 700px;
  margin: 30px;
  background-color: #000000;
  padding: 30px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.heading {
  display: block;
  color: white;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 20px;
}

.form-container .form .input {
  color: #87a4b6;
  width: 100%;

  border: none;
  outline: none;
  padding: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  border-left: 1px solid transparent;
}

.form-container .form .input:focus {
  border-left: 5px solid #ff009d;
}

.form-container .form .textarea {
  width: 100%;
  padding: 10px;
  border: none;
  outline: none;
  color: #ff009d;
  font-weight: bold;
  resize: none;
  max-height: 300px;
  margin-bottom: 20px;
  border-left: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}

.form-container .form .textarea:focus {
  border-left: 5px solid #ff009d;
}

.form-container .form .button-container {
  display: flex;
  gap: 10px;
}

.form-container .form .button-container .send-button {
  flex-basis: 70%;
  background: #ffffff;
  padding: 10px;
  color: #001925;
  text-align: center;
  font-weight: bold;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}

.form-container .form .button-container .send-button:hover {
  background: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  box-shadow: 3px 3px #fafafa
}

.form-container .form .button-container .send-button:active{
  box-shadow: none;
  transform: translate(3px, 3px);
  transition: all 0.2s
}

.form-container .form .button-container .reset-button-container {
  filter: drop-shadow(1px 1px 0px #ffffff);
  flex-basis: 30%;
}

.form-container .form .button-container .reset-button-container .reset-button {
  position: relative;
  text-align: center;
  padding: 10px;
  color: #070707;
  font-weight: bold;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: all 0.2s ease-in-out;
}

.form-container .form .button-container .reset-button-container .reset-button:hover {
  background: black;
  border: 1px solid #ffffff;
  color: white;
  box-shadow: 3px 3px #fafafa;
}

.form-container .form .button-container .reset-button-container .reset-button:active{
  box-shadow: none;
  transform: translate(3px, 3px);
  transition: all 0.2s
}



</style>